<template>
  <section class="container">
    <div class="cube" v-for="item in resultsTransform.SDS"></div>
  </section>
</template>

<script setup>
import { reactive } from 'vue'
import { Evaluation } from '@/api/Evaluation'
const EvaluationRequest = new Evaluation()

const results = reactive({
  SDS: [],
  HCL: [],
})

const allScore = reactive({
  SDS: [],
  HCL: [],
})

const resultsTransform = reactive({
  SDS: [],
  HCL: [],
})

EvaluationRequest.getEvaluations().then((result) => {
  result.data.forEach((item) => {
    results[item.title].push(item)
    allScore[item.title].push(item.score)
  })

  allScore['SDS'].forEach((item) => {
    item.forEach((score, index) => {
      if (!resultsTransform.SDS.index) {
        console.log('没数组')
      } else {
        console.log('有数组')
      }
    })
    // item.forEach((score, index) => {
    //   if (!resultsTransform['SDS'][index]) {
    //     resultsTransform['SDS'][index] = []
    //   }
    //   resultsTransform['SDS'][index].push(score)
    // })  
  })

  allScore['HCL'].forEach((item) => {
    item.forEach((score, index) => {
      if (!resultsTransform['HCL'].index) {
        resultsTransform['HCL'][index] = []
      }
      resultsTransform['HCL'][index].push(score)
    })
  })
})
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100%;
  display: flex;
}

.cube {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  margin: 2px;
  background-color: #aaa;
}

.cube.active {
  background-color: #309377;
}
</style>
